<template>
    <view
        :style="selected&&themeStyles.btnSelected" 
        class="zz-coupon-item20200730"
        @click="selectCopuon">
        <!--  -->
        <view class="coupon-item-box">
            <!-- 优惠券信息 -->
            <view class="coupon-info">
                <!--  -->
                <view class="coupon-info_left">
                    <!-- 名称 -->
                    <view class="coupon-info_left_name">{{couponInfo.couponTypeValue}}</view>
                    <!-- 日期 -->
                    <view class="coupon-info_left_time">
                        {{couponInfo.startTime}} 至 {{couponInfo.endTime}}
                    </view>
                </view>
                <!--  -->
                <view class="coupon-info_right">
                    <view 
                        :style="themeStyles.textMainColor"
                        class="zz-mt2 coupon-info_right_symbol">{{
                            couponTypes[`${couponInfo.couponType}`]?
                            couponTypes[`${couponInfo.couponType}`].symbol:
                            '...'
                        }} </view>
                    <view 
                        :style="themeStyles.textMainColor"
                        class="coupon-info_right_num">{{couponInfo.discounts}}</view>
                </view>
                <!--  -->
                <view class="split-line"></view>
            </view>
            <!-- 满减信息 -->
            <view class="reach-info">
                <!-- 描述 -->
                <view class="reach-info_left">{{couponInfo.couponName}}</view>
                <!-- 满减金额 -->
                <view class="reach-info_right">{{couponInfo.content}}</view>
            </view>
        </view>
    </view>
</template>
<script>
/* vuex */
import { mapState } from "vuex";
export default {
    props:{
        selected:{
            type:Boolean,
            default:false
        },
        index:{
            type:Number,
            default:0,
        },
        couponInfo:{    //优惠券信息
            type:Object,
            default(){
                return {};
            }
        }
    },
    computed:{
        ...mapState("coupon",["couponTypes"]),
    },
    data(){
        return {
            
        };
    },
    watch:{
        
    },
    methods:{
        /* 选择卡片 */
        selectCopuon(){
            //
            this.$emit("change-status",this.index);
            //
            this.$emit("select-coupon",this.couponInfo,this.index);
        }
    }
}
</script>
<style lang="scss">
.zz-coupon-item20200730 {
    /*  */
    position:relative;
    margin-bottom:24rpx;
    border-radius:6rpx;
    border:2px solid transparent;
    /*  */
    .coupon-item-box {
        position:relative;
        min-height:204rpx;
        padding:20rpx 40rpx 16rpx;
        background-color:#fff;
        box-shadow: 0 0 28rpx 0 rgba(204, 204, 204, 0.4);
        /* box-shadow: 0 0 28rpx 0 red; */
    }
    /*  */
    .coupon-info,
    .coupon-info_left,
    .coupon-info_right,
    .reach-info {
        display:flex;
    }
    .coupon-info {
        position:relative;
        justify-content: space-between;
    }
    .coupon-info_left {
        flex:1 0 auto;
        flex-flow:column wrap;
        max-width:83%;
    }
    .coupon-info_left_name {
        margin-bottom:20rpx;
        font-size:32rpx;
        line-height:44rpx;
        color:#333;
    }
    .coupon-info_left_time {
        margin-bottom:20rpx;
        font-size:24rpx;
        line-height:34rpx;
        color:#999;
    }
    /*  */
    .coupon-info_right {

    }
    .coupon-info_right_symbol {
        font-size:36rpx;
        line-height:112rpx;
    }
    .coupon-info_right_num {
        font-size:72rpx;
        line-height:98rpx;
        font-weight:bold;
    }
    /*  */
    .split-line {
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:1rpx;
        border-top:1rpx dashed #F0F0F0;
        transform:scaleY(0.5);
    }
    /*  */
    .reach-info {
        margin-top:14rpx;
        justify-content:space-between;
    }
    .reach-info_left,
    .reach-info_right {
        font-size:24rpx;
        line-height:34rpx;
        color:#666;
    }
    .reach-info_left {
        flex:1 0 auto;
        max-width:83%;
    }

}
</style>